<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="beans.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/where.css">
</head>
<body>
	<%
		//模拟传来的该用户的数据，已经成功
		/*Map<String, Object> map = new HashMap<String, Object>();
		map.put("userno", "q11111");
		map.put("username", "张3");
		map.put("usersex", "女");
		map.put("userprofession", "教师");
		map.put("userinterest", "足球-电影");
		
		pageContext.setAttribute("map", map);
		*/
		
		//真正从数据库里取出数据
		String userno=(String)session.getAttribute("userno");
		//out.print(userno);正确得到用户号
		Map<String, Object> map=null;
		UserDAO userDAO=new UserDAO();
		map=userDAO.findone(userno);
		pageContext.setAttribute("map", map);
		
		
		//兴趣是多项值，下面的呈现有2种方案；一种方案将userinterest转成数组，下面用jstl循环判断，一种是利用jstl的contains函数

	%>
	<div id="all">
		<div id="header">
			<h3 >修改个人信息页面</h3>
		</div>
		
		<div id="content">
			<form name="form1" action="" method="get">
			<table>
				<tr>
					<td>用户号：</td>
					<td><input name="userno" type="text" value="${map.userno }"  readonly="readonly"></td>
					<td>以字母开头，不少于5位</td>
				</tr>
				<tr>
					<td>用户密码：</td>
					<td><input name="userpwd" type="password" value="${map.userpwd }" ></td>
					<td>不少于6位</td>
				</tr>
				<tr>
					<td>再输密码：</td>
					<td><input name="userpwdagain" type="password" value="${map.userpwd }" ></td>
					<td>不少于6位</td>
				</tr>
				<tr>
					<td>姓名：</td>
					<td><input name="username" type="text" value="${map.username }" ></td>
			
				</tr>
				
				<tr>
					<td>性别：</td>
					<td>
					
						<input name="usersex" type="radio" <c:if test="${map.usersex=='男' }">checked</c:if> value="男">男
						<input name="usersex" type="radio" <c:if test="${map.usersex=='女' }">checked</c:if> value="女">女
					</td>			
				</tr>
				
				<tr>
					<td>年龄：</td>
					<td>
						<input name="userage" type="text" value="${map.userage }" >
					</td>			
				</tr>
				
				<tr>
					<td>家庭住址：</td>
					<td>
						<input name="useraddress" type="text" value="${map.useraddress }" >					
					</td>			
				</tr>
				
				<tr>
					<td>职业：</td>
					<td colspan="2">
						<select name="userprofession" >						
						<option value="教师" <c:if test="${map.userprofession=='教师'}"> selected </c:if > >教师 
						</option>
						<option value="学生" <c:if test="${map.userprofession=='学生'}">selected</c:if>>学生
						</option>
						</select>					
					</td>
				</tr>
				<tr>
					<td>兴趣：</td>
					<td colspan="2">
						<input name="userinterest" type="checkbox" value="足球" <c:if test="${fn:contains(map.userinterest,'足球') }">checked</c:if> >足球
						<input name="userinterest" type="checkbox" value="篮球" <c:if test="${fn:contains(map.userinterest,'篮球') }">checked</c:if> >篮球	
						<input name="userinterest" type="checkbox" value="电影" <c:if test="${fn:contains(map.userinterest,'电影') }">checked</c:if> >电影	
						<input name="userinterest" type="checkbox" value="小说" <c:if test="${fn:contains(map.userinterest,'小说') }">checked</c:if> >小说					
					</td>
				</tr>
				
				<tr>
					<td>邮箱：</td>
					<td colspan="2">
						<input name="useremail" type="text" value="${map.useremail }" >
					</td>			
				</tr>
				
				<tr>
					<td>照片：</td>
					<td colspan="2">
						<input name="userphoto" type="file" value="${map.userphoto }"  >
					</td>			
				</tr>
				
				<tr>
					<td>简介：</td>
					<td colspan="2">
						<textarea name="usersummary" id="usersummary" rows="6" cols="30">${map.usersummary } </textarea>
					
					</td>
				</tr>
				
			</table>
			</form>
		</div>
		<div id="third">		
			<a href="final-main.jsp" onclick="tj1();return false;">提交</a><!-- tj1()如果错，return false失效 -->				
		</div>
		
	</div>
	

	<script type="text/javascript">
	
	function tj1(){
		//如果不能运行，原因在于：html中的name写错，里面代码写错等。错一点，js函数执行不下去。可在控制台下查错	
		
		
		var userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary;

		userno=form1.userno.value;		
		userpwd=form1.userpwd.value;		
		userpwdagain=form1.userpwdagain.value;
		username=form1.username.value;
		//alert("username is:"+username+"length is:"+username.length);//验证如果不输入的话，长度为0
		
	
		
		usersexarray=form1.usersex;
		for(var i=0;i<usersexarray.length;i++){
			if(usersexarray[i].checked){
				usersex=usersexarray[i].value;
			}				
		}
	
		userage=form1.userage.value;
		useraddress=form1.useraddress.value;
		userprofession=form1.userprofession.value;
		
		
		userinterest="";//设置一个初值，否则变量开始默认值undefined
		userinterestarray=form1.userinterest;
		for(var i=0;i<userinterestarray.length;i++){
			if(userinterestarray[i].checked){
				userinterest=userinterest+userinterestarray[i].value;
			}				
		}
				
		useremail=form1.useremail.value;
		userphoto=form1.userphoto.value;		
		usersummary=form1.usersummary.value;
		
		alert(userno+userpwd+userpwdagain+username+usersex+useraddress+userprofession+userinterest+useremail+userphoto+usersummary);
		
		//检测数据
		check(userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary);
		
	}
	
	function check(userno,userpwd,userpwdagain,username,usersex,useraddress,userprofession,userinterest,useremail,userphoto,usersummary){
		
		//定义检测用户编号的规则，不少于5位，最多10位，首位是字母
		var rule=/^[a-zA-Z]{1}\w{4,9}$/;
		if(!rule.test(userno)) alert("编号不符合要求");
		else if(userpwd!=userpwdagain) alert("密码不一致");
		else if(username.length<=0) alert("没有输入姓名");		
		else{
			//window.location.href="main.jsp";
			form1.action="modiselfcheck.jsp";
			form1.submit();
		}
		
	}
	</script>


</body>
</html>